<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path" :to="item.path">
      {{ item.meta?.title || item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const breadcrumbList = computed(() => {
  const matched = route.matched.filter(item => item.meta && item.meta.title);
  return matched;
});
</script>

<script lang="ts">
export default {
  name: 'Breadcrumb'
};
</script>

<style scoped lang="scss">
/* Ant Design Pro 标准面包屑样式 */
.el-breadcrumb {
  font-size: 14px; // Ant Design Pro 标准字号
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5715;
  
  :deep(.el-breadcrumb__item) {
    .el-breadcrumb__inner {
      color: rgba(0, 0, 0, 0.45); // Ant Design Pro 次要文字色
      font-weight: 400;
      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      
      &:hover {
        color: var(--el-color-primary); // Hover 时显示主题色
        cursor: pointer;
      }
      
      &.is-link {
        color: rgba(0, 0, 0, 0.45);
        font-weight: 400;
        
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
    
    &:last-child .el-breadcrumb__inner {
      color: rgba(0, 0, 0, 0.85); // 当前页面文字色更深
      font-weight: 400;
      cursor: default;
      
      &:hover {
        color: rgba(0, 0, 0, 0.85);
      }
    }
    
    .el-breadcrumb__separator {
      color: rgba(0, 0, 0, 0.45);
      font-weight: 400;
      margin: 0 8px; // Ant Design Pro 标准间距
    }
  }
}

/* 暗黑模式适配 */
:deep([data-theme='dark']) {
  .el-breadcrumb {
    color: rgba(255, 255, 255, 0.65);
    
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: rgba(255, 255, 255, 0.45);
        
        &:hover {
          color: var(--el-color-primary);
        }
      }
      
      &:last-child .el-breadcrumb__inner {
        color: rgba(255, 255, 255, 0.85);
        
        &:hover {
          color: rgba(255, 255, 255, 0.85);
        }
      }
      
      .el-breadcrumb__separator {
        color: rgba(255, 255, 255, 0.45);
      }
    }
  }
}
</style>
